<template>
  <!-- 放置上层输入框 -->
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="formInline.user" placeholder="班级名称" />
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="formInline.region" placeholder="归属学科">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="formInline.tiuu" placeholder="显示状态">
            <el-option label="显示" :value="1" />
            <el-option label="隐藏" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="btnSearch">搜索</el-button>
          <el-button plain @click="btnCancel">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          type="primary"
          plain
          @click="createClass"
        >创建班级</el-button>
      </div>
    </el-row>
    <!-- tab表格开始 -->
    <el-table :data="classData" style="width: 100%" border max-height="700" :header-cell-style="{ background: '#fafafa' }">

      <el-table-column label="#" width="55" type="expand">
        <!-- 展开行 -->
        <template slot-scope="props">
          <el-form inline class="demo-table-expand">
            <el-row>
              <el-col :span="12">
                <el-form-item label="班级名称">
                  <span>{{ props.row.class_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="归属学科">
                  <span>{{ props.row.subject_name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 分割线 -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="创建人">
                  <span>{{ props.row.username }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开始结束日期">
                  <span>{{ props.row.start_time | formatTime }}至{{
                    props.row.end_time | formatTime
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 分割线 -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="创建日期">
                  <span>{{ props.row.created_at }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="讲师">
                  <!-- <span>{{ props.row.teacher_info }}</span> -->
                  <el-tag type="success">
                    {{
                      JSON.parse(props.row.teacher_info)
                        .map(val => {
                          return val.username;
                        })
                        .join(",")
                    }}</el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 分割线 -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="助教">
                  <!-- <span>{{ props.row.zhujiao_info }}</span> -->
                  <el-tag type="danger">
                    {{
                      JSON.parse(props.row.zhujiao_info)
                        .map(val => {
                          return val.username;
                        })
                        .join(",")
                    }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="班主任">
                  <!-- <span>{{ props.row.manager_info }}</span> -->
                  <el-tag type="warning">
                    {{
                      JSON.parse(props.row.manager_info)
                        .map(val => {
                          return val.username;
                        })
                        .join(",")
                    }}</el-tag>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>

        <!-- 展开行结束 -->
      </el-table-column>
      <el-table-column label="序号" width="55" type="index" />
      <el-table-column prop="id" label="班级ID" width="70" />
      <el-table-column prop="class_name" label="班级名称" width="200" />
      <el-table-column prop="subject_name" label="归属学科" width="160" />
      <el-table-column prop="teacher_info" label="讲师" width="150">
        <template slot-scope="{ row }">
          <el-tag type="success">
            {{
              JSON.parse(row.teacher_info)
                .map(val => {
                  return val.username ? val.username : 'shabi';
                })
                .join(",")
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="zhujiao_info" label="助教" width="150">
        <template slot-scope="{ row }">
          <el-tag type="danger">
            {{
              JSON.parse(row.zhujiao_info)
                .map(val => {
                  return val.username;
                })
                .join(",")
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="manager_info" label="班主任" width="150">
        <template slot-scope="{ row }">
          <el-tag type="warning">
            {{
              JSON.parse(row.manager_info)
                .map(val => {
                  return val.username;
                })
                .join(",")
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="创建人" width="140" />
      <el-table-column prop="zip" label="是否显示" width="120">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.state"
            active-color="#409eff"
            inactive-color="#dcdfe6"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
            @change="switchChange(row.id, row.state)"
          />
        </template>
      </el-table-column>
      <el-table-column label="开始结束日期" width="240">
        <template slot-scope="{ row }">
          {{ row.start_time | formatTime }}至{{ row.end_time | formatTime }}
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建日期" width="160" />
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="{ row }">
          <el-button type="primary" icon="el-icon-edit" circle @click="editClass(row.id)" />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteClass(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- tab表格结束 -->
    <!-- 分页器开始 -->
    <div class="block">
      <span class="demonstration" />
      <el-pagination
        background
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[1, 2, 5, 10]"
        layout="total, sizes, prev, pager, next ,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 分页器结束 -->
    <!-- 弹出层 -->
    <add-class ref="dialog" @fn="getClassList" />
  </el-card>
</template>
<script>
// 引入班级列表接口
import { getClassList, getTreeList, deleteClass, editClass } from '@/api/class'
import AddClass from './addClass'
export default {
  name: 'Listt',
  components: {
    // 注册弹框
    AddClass
  },
  data() {
    return {
      formInline: {
        user: '',
        region: '',
        tiuu: ''
      },
      classData: [], // 班级列表数据
      // 总条数
      total: 0,
      // 分页参数
      page: {
        query: '',
        // 当前页数
        pagenum: 1,
        // 显示一页多少条数据
        pagesize: 1
      },
      //  for of循环显示的空数组
      options: [],
      dialogVisible: false
    }
  },
  created() {
    // 调用班级接口
    this.getClassList()
    //  调用学科列表接口
    this.getTreeList()
  },
  methods: {

    // 调用班级列表接口
    async getClassList() {
      const { data } = await getClassList(this.page)
      // const list = data.find(item => item.list !== null)
      // console.log(list)
      var listss = data.list
      delete listss[0]
      this.classData = listss
      this.total = data.total
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newsize) {
      // 这里conso 选中第几页 最新的值

      console.log(newsize)
      // 最新的条数（newsize）赋值给 动态的 pagesie
      this.page.pagesize = newsize
      // 获取到最新一页显示的数据  重新发送axios请求
      this.getClassList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      // 把最新的页码（newPage）赋值给 动态的 pagenum
      this.page.pagenum = newPage
      // 获取到最新显示的页码值  重新发送axios请求
      // this.getClassList()
    },
    // 自定义事件监听事件，传入状态
    async switchChange(id, state) {
      // await dataEcho({ id: id, state: state })
      this.$message.success('切换成功')
    },
    // 发送获取学科请求
    async getTreeList() {
      // 解构
      const { data } = await getTreeList()
      console.log(data)
      // 将解构的数据赋值给需要循环的空数组
      this.options = data
    },
    // 搜索
    async btnSearch() {
      // 搜索接口和班级列表是一个接口
      const { data } = await getClassList({
        // 点击下拉需要携带的具体参数
        class_name: this.formInline.user, // 学科名称
        page: 1,
        limit: 10,
        state: this.formInline.tiuu, // 显示状态
        subject_id: this.formInline.region // id
      })
      console.log(data)
      this.classData = data.list
    },
    // 重置按钮
    btnCancel() {
      // 将表单输入框的置为空
      this.formInline = {
        class_name: '',
        state: '',
        subject_id: ''
      }
      // 重置之后再掉一次数据
      this.getClassList()
    },
    // 添加班级按钮
    createClass() {
      this.$refs.dialog.dialogVisible = true
      console.log(this.$refs.dialog)
    },
    // 表格中删除按钮
    async deleteClass(id) {
      try {
        await this.$confirm('确认删除该吗', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })

        await deleteClass(id)
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.success('取消删除')
        console.log(error)
      }
      // 删除之后重新调用接口
      this.getClassList()
    },
    // 修改编辑
    async editClass(id) {
      try {
        console.log(11)
        // 弹出成
        this.$refs.dialog.dialogVisible = true

        // 解构数据传入修改的id
        const { data } = await editClass(id)
        console.log(data)
        // console.log(this.$refs.dialog)

        this.$refs.dialog.formData = {
          class_name: data.class_name,
          id: data.id,
          sort: data.sort,
          state: data.state,
          subject_id: data.subject_id,
          teacher_info: JSON.parse(data.teacher_info).map(val => { return val.username }),
          zhujiao_info: JSON.parse(data.zhujiao_info).map(val => { return val.username }),
          manager_info: JSON.parse(data.manager_info).map(val => { return val.username }),
          value: [data.start_time, data.end_time]
        }

        // console.log(data)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  color: #909399;
}
</style>
